<template>
  <uni-nav-bar title="车辆档案" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package_sale" style="margin-bottom: 0px;padding:15rpx 20rpx">
    <input class="uni-input" confirm-type="search" placeholder="搜索车牌" @confirm="confirm" v-model="search"
      @input="interrogate" />
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package_sale space-between" @click="navTo('Sale/carfriend/carDetail?id='+item.id)"
      v-for="(item,index) in orderLists" :key='index'>
      <view class="direction-start">
        <view>{{item.code}}·{{item.line}}</view>
        <view style="margin-top: 5rpx;color: #666;">{{item.createtime}}</view>
      </view>
      <view>采集人：{{item.staff_name}}</view>
    </view>
    <Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无车辆档案"></Popu>
  </scroll-view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { ref } from 'vue';
  import { getCartCodeList } from '@/gql/earthPushing/vehicle';
  import { toPublish } from '@mqtt';
  import { showLoading, errorToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const search = ref('')
  const inquireAbout = ref(false)
  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref();
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 120;
    },
  });
  init()
  function init() {
    showLoading()
    isLoading.value = true;
    const payload = {
      query: getCartCodeList,
      variables: {
        page: currentPage.value,
        staff_id,
        keywords: search.value
      },
    };
    toPublish(
      'ql/staff/getCartCodeList',
      payload,
      (obj : any) => {
        const { getCartCodeList } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getCartCodeList.list];
        lastPage.value = getCartCodeList.lastpage
      },
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  /**
    * 搜索内容
    */
  function interrogate(evt : any) {
    const { detail } = evt;
    if (!detail.value && inquireAbout) {
      currentPage.value = 1;
      orderLists.value = [];
      init()
    }
  }
  /**
   * 搜索车友信息
   */
  function confirm() {
    if (search.value) {
      inquireAbout.value = search.value ? true : false;
      currentPage.value = 1;
      orderLists.value = [];
      init()
    } else {
      errorToast('请输入您要搜索的内容')
    }
  }
</script>

<style scoped lang="less">
  input {
    width: 100%;
    padding: 0px 20rpx;
    height: 70rpx;
    box-sizing: border-box;
    background-color: #eee;
    border-radius: 5px;
    text-align: center;
  }
</style>